<script setup>
import { onMounted, ref } from "vue";
import TopButton from "@/components/Pengyq/TopButton.vue";
import { getCommoditYListAPI } from "@/server/api/ItemCommodity";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const userUser = useUseStore();
// 所有订单信息数据
let allOrders = ref([]);

// 定义Nav导航栏数据
const NavList = ref([
  { title: "me.applicationRecords.approved" },
  { title: "me.applicationRecords.reviewFailed" },
]);

const stateIndex = ref(0);

// 获取申请订单
const getCommoditYList = async () => {
  const res = await getCommoditYListAPI(userUser.itemId);
  console.log(res);
  allOrders.value = res.data.data;
  allOrders.value.forEach((item) => {
    item.avatarImag = userUser.ing + item.avatarImag;
  });

  console.log("商品列表", allOrders.value);
};

// 做数据过滤再渲染
const dataFun = (index) => {
  if (index != undefined) {
    stateIndex.value = index;
  }
  let arr = [];

  if (stateIndex.value == 0) {
    arr = allOrders.value.filter((item) => item.status == "0");
  } else {
    arr = allOrders.value.filter((item) => item.status == "1");
  }

  return arr;
};

onMounted(() => {
  // userUser.getItemIdByUserId();
  getCommoditYList();
});
</script>

<template>
  <div class="page">
    <top-button :title="$t('me.sellerCenter.applicationRecords')" />

    <div class="itemCenter">
      <div class="tab_list">
        <ul>
          <li v-for="(i, index) in NavList" :key="index" @click="dataFun(index)"
            :class="[stateIndex == index ? 'active' : '']">
            {{ $t(i.title) }}
          </li>
        </ul>
      </div>

      <ul class="list">
        <li class="box_show" v-for="(item, index) in dataFun(index)" :key="index">
          <div class="list_hd">
            <div class="login"></div>
            <div class="text_right" v-if="item.status == '0'">
              {{ $t("me.applicationRecords.approved") }}
            </div>
            <div class="text_right" v-else-if="item.status == '1'">
              {{ $t("me.applicationRecords.reviewFailed") }}
            </div>
            <div class="text_right" v-else>under review</div>
          </div>

          <div class="list_ad">
            <div class="imgs">
              <img :src="item.avatarImag" alt="" />
            </div>
            <div class="title ellipsis-2">{{ item.itemCommodityName }}</div>
            <div class="introduce">
              <div class="price"><i>Pi</i>{{ item.price }}</div>
              <div class="bottom_button"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  .itemCenter {
    height: 100vh;
    background-color: #f5f5f5;
    box-sizing: border-box;
    width: 100%;
    font-size: 14rem;

    padding-top: 100rem;

    .tab_list {
      position: fixed;
      top: 60rem;
      left: 0;
      right: 0;

      ul {
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-around;
        padding: 15rem 10rem;

        li {
          position: relative;
          color: #ccc;
          font-weight: 600;

          &::after {
            position: absolute;
            bottom: -10rem;
            display: none;
            content: "";
            background-color: #642e8e;
            width: 20rem;
            height: 3rem;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10rem;
          }

          &:hover {
            color: #642e8e;

            &::after {
              display: block;
              color: #642e8e;
            }
          }

          &.active {
            color: #642e8e;

            &::after {
              display: block;
            }
          }
        }
      }
    }

    .list {
      background-color: #f5f5f5;

      li {
        padding: 6rem 10rem;
        margin-top: 10rem;
        background-color: #fff;

        .list_hd {
          display: flex;
          justify-content: space-between;
          height: 20rem;
          padding: 10rem 0;

          .login {
            height: 24rem;
            color: #000000;
            font-weight: 500;
            font-size: 16rem;

            img {
              margin-right: 10rem;
              width: 24rem;
              height: 100%;
              object-fit: cover;
              vertical-align: middle;
              border-radius: 50%;
              overflow: hidden;
            }
          }

          .text_right {
            color: #642e8e;
            font-size: 16rem;
          }
        }

        .list_ad {
          display: flex;
          margin-top: 5rem;

          .imgs {
            width: 20%;
            overflow: hidden;

            border-radius: 10rem;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .title {
            margin-left: 20rem;
            width: 120rem;
            height: 56rem;
            font-size: 14rem;
            line-height: 26rem;
          }

          .introduce {
            display: flex;
            flex-direction: column;
            padding-left: 20rem;

            .price {
              margin-left: auto;
              margin-bottom: 20rem;
              font-size: 16rem;
              font-weight: 600;
              color: rgb(0, 0, 0);

              >i {
                color: #000000;
                font-size: 12rem;
              }
            }

            .bottom_button {
              margin-left: auto;
              display: flex;

              .btn {
                margin-left: 10rem;
                font-size: 12rem;
                width: 120rem;
                height: 30rem;
                line-height: 30rem;
                text-align: center;
                border-radius: 20rem;
                background-color: #642e8e;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
